<template>
    <div class="container">
      <div class="handle-box">
        <span style="padding:8px;">红娘姓名：</span>
        <el-input v-model="query.nickname"
                  placeholder="姓名"
                  class="handle-input mr10"></el-input>
        <span style="padding:8px;">红娘电话：</span>
        <el-input v-model="query.mobile" 
                  placeholder="姓名"
                  class="handle-input mr10"></el-input>
        <span style="padding:8px;">申请状态：</span>
        <el-select v-model="query.status"  @change="initAjaxMethod" placeholder="请选择">
            <el-option label="全部" :value="-1"></el-option>
            <el-option label="未打款" :value="0"></el-option>
            <el-option label="已打款" :value="1"></el-option>
            <!-- <el-option label="已退回" :value="2"></el-option> -->
        </el-select>
        <span style="padding:8px;"></span>
        <el-button type="success"
                   icon="el-icon-search"
                   size="medium"
                   @click="handleSearch">搜索</el-button>
        <el-button type="warning"
                   size="medium"
                   icon="el-icon-refresh-left"
                   @click="resultClick()">重置</el-button>
      </div>
      <el-table :data="tableData"
                border
                ref="multipleTable"
                header-cell-class-name="table-header"
                @selection-change="handleSelectionChange">
        <el-table-column type="selection"
                         width="55"
                         align="center"></el-table-column>
        <el-table-column label="序号"
                         align="center"
                         width="100"
                         fixed>
          <template slot-scope="scope">{{scope.$index+(query.pageIndex - 1) * query.pageSize + 1}}</template>
        </el-table-column>
         <el-table-column label="红娘姓名" align="center">
            <template slot-scope="scope">{{ scope.row.nickname }}</template>
        </el-table-column>
        <el-table-column label="电话" align="center">
            <template slot-scope="scope">{{ scope.row.mobile }}</template>
        </el-table-column>
        <el-table-column label="金额" align="center">
            <template slot-scope="scope">{{ scope.row.amount }}</template>
        </el-table-column>
        <el-table-column label="银行账户" width="200"  align="left">
                    <template slot-scope="scope">
                       <div>
                        <span >开户行:{{  scope.row.branch }}</span><br/>
                        <span >银行卡号:{{  scope.row.brank_num }}</span><br/>
                       </div>
                    </template>
        </el-table-column> 
        <el-table-column label="打款商户" width="200"  align="left">
                    <template slot-scope="scope">
                       <div>
                        <span >商户名称:{{  scope.row.payment_info.name }}</span><br/>
                        <span >商户号 :{{  scope.row.payment_info.mch_id }}</span><br/>
                       </div>
                    </template>
        </el-table-column>  
        <el-table-column label="状态" align="center">
            <template slot-scope="scope">
                <span v-if="scope.row.status==0">未打款</span>
                <span v-if="scope.row.status==1">已打款</span>
                <!-- <span v-if="scope.row.status==2">已退回</span> -->
            </template>
        </el-table-column> 

  

        <el-table-column label="产生时间" align="center">
            <template slot-scope="scope">{{scope.row.create_time | formDate}}</template>
        </el-table-column>
        <el-table-column label="打款凭证"
                       align="center">
        <template slot-scope="scope">
          <img :src="docLoadPath+scope.row.credential" alt="" style="widht:40px;height:30px;">
        </template>
      </el-table-column>
        <el-table-column label="打款时间" align="center">
            <template slot-scope="scope">{{scope.row.play_time | formDate}}</template>
        </el-table-column>
        <el-table-column label="操作"
                         width="200"
                         align="center">
          <template slot-scope="scope">
            <el-button @click="refuseMethod(scope.row,scope.$index)"
                       type="text"
                       size="small"
                       v-if="scope.row.status==0"
                       icon="el-icon-edit">确认打款</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination background
                       layout="total, prev, pager, next, jumper"
                       :current-page="query.pageIndex"
                       :page-size="query.pageSize"
                       :total="pageTotal"
                       @current-change="handlePageChange"></el-pagination>
      </div>
      <!-- 编辑弹出框 -->
          <el-dialog title="打款" :visible.sync="dialog" width="50%">
            <div class="list-group">
                    <el-row :gutter="20">
                        <el-col :span="3">
                            <div class="list-title"><span class="mast-icon" >*</span>打款凭证:</div>
                        </el-col>
                        <el-col :span="21">
                            <el-upload
                                class="avatar-uploader"
                                :action="imgLoadPath"
                                :show-file-list="false"
                                :on-success="handleHeaderSuccess"
                                :before-upload="beforeHeaderUpload"
                            >
                                <img
                                    v-if="credential"
                                    :src="docLoadPath + credential"
                                    class="avatar"
                                    style="max-width: 100px"
                                /> 
                                <el-button v-else type="warning" icon="el-icon-upload2" size="medium">上传</el-button>
                            </el-upload>
                            <p style="padding:6px;font-size:12px;color:red;">(图片规格750*340,支持jpg,jpeg,png,gif,bmp)</p>
                        </el-col>
                    </el-row>
                </div>
              <span slot="footer" class="dialog-footer">
                  <el-button size="medium" @click="dialog = false">取 消</el-button>
                  <el-button size="medium" type="primary" @click="saveEdit">确 定</el-button>
              </span>
          </el-dialog>
    </div>
  </template>
  
  <script>
  import api from '@/api/index';
  import {getdate} from '@/utils/utils'
  export default {
    name: "atchmakerReservation",
    data () {
      return {
        docLoadPath: api.IMG_PATH,
        exhibition_id: '',
        query: {
          pageIndex: 1,
          pageSize: 10,
          nickname: '',
          mobile: '',
          status:-1
        },
        zzTypeist: [],
        pageTotal: 0,
        tableData: [],
        fId:'',
        fIndex:'',
        dialog:false,
        credential: '',
        imgLoadPath: api.API_PATH + api.LOGIN_IMG,
        docLoadPath: api.IMG_PATH,
      }
    }, 
    filters:{
      toFixedFile:function(val){
        if(!val)return '0.00';
        return Number(val).toFixed(2)
      },
      formDate: (val) => {
          if (!val) return '';
          return getdate(val);
      }
    },
    mounted () {
      this.initAjaxMethod()
    },
  
    methods: {
      //打回
      refuseMethod(data,index){
        this.return_text='';
        this.dialog=true;
        this.fId=data.id;
        this.fIndex=index;
      },
      saveEdit(){
        if(!this.credential || this.credential == ''){
          this.$message.error('请上传打款凭证');
        }
        const loading = this.$loading({ text: '加载中...' });
          this.$http.post(api.MATCHMAKER_COMMISSION_PAYMENT, {id:this.fId,credential:this.credential})
                .then((res) => {
                  loading.close();
                  if (res.code == 1) {
                    this.$message.success('成功');
                    this.tableData[this.fIndex].status=1;
                    this.initAjaxMethod()
                    this.dialog=false;
                  } else {
                    this.$message.error(res.msg);
                  }
                })
                .catch((err) => {
                  this.$message.error(err.msg);
                })
      },
      //删除
      handleDelete(data){
        this.delAjaxMethod(data.id);
      },
      //编辑
      createBus(row){
        this.$router.push({ path: '/storedCardAdd', query: {id:row.id, type: 2}})
      },
      resultClick () {
        this.query.mobile = '';
        this.query.nickname = '';
        this.query.pageIndex=1;
        this.query.status=-1;
        this.initAjaxMethod()
      },
      createMethod () {
        this.$router.push({ path: '/storedCardAdd', query: { type: 1 } })
      },
      // 多选操作
      handleSelectionChange (val) {
        this.multipleSelection = val;
      },
      delAllSelection () {
        let arr = [];
        if (this.multipleSelection.length <= 0) {
            this.$message({
                type: 'error',
                message: '请选择一个'
            });
            return false;
        } else {
            this.multipleSelection.forEach(item => {
                arr.push(item.id);
            });
            this.delAjaxMethod(arr.join(','));
        }
      },
      delAjaxMethod(data,index){
        this.$confirm('确定此操作?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const loading = this.$loading({ text: '加载中...' });
          this.$http.post(api.MATCHMAKER_APPLICATION_CHECK, {id:data.id})
                .then((res) => {
                  loading.close();
                  console.log('项目列表', res)
                  if (res.code == 1) {
                    this.$message.success('成功');
                    this.tableData[index].status=1;
                  } else {
                    this.$message.error(res.msg);
                  }
                })
                .catch((err) => {
                  this.$message.error(err.msg);
                })
        })
      },
      // 分页导航
      handlePageChange (val) {
        this.$set(this.query, 'pageIndex', val);
        this.initAjaxMethod();
      },
      handleSearch () {
        this.$set(this.query, 'pageIndex', 1);
        this.initAjaxMethod()
      },
      initAjaxMethod () {
        let data = {
          pageIndex: this.query.pageIndex,//[string]	是	当前页
          pageSize: this.query.pageSize,//[string]	是	每页条数
          mobile: this.query.mobile,//[string]	是	付款名称
          status: this.query.status,//[string]	是	付款名称
          nickname: this.query.nickname
        };
        this.$http.post(api.MATCHMAKER_COMMISSION_INDEX, data)
          .then((res) => {
            if (res.code == 1) {
              this.tableData = Array.isArray(res.data.list)?res.data.list:[];
              this.pageTotal = res.data.total;
            } else {
              this.$message.error(res.msg);
            }
          })
          .catch((err) => {
            this.$message.error(err.msg);
          })
      },
        //预登记headerpc头部
        handleHeaderSuccess(res, file) {
            console.log(res);
            if (res.code == 0) {
                this.$message({
                    type: 'warning',
                    message: res.msg
                });
                return false;
            }
            this.credential = res.data;
        },
        beforeHeaderUpload(file) {
            var FileExt = file.name.replace(/.+\./, '');
            if (['jpg', 'jpeg', 'png','gif','bmp'].indexOf(FileExt.toLowerCase()) === -1) {
                this.$message({
                    type: 'warning',
                    message: '请上传jpg,jpeg,png,gif,bmp格式文件！'
                });
                return false;
            }
        },
    }
  }
  </script>
  
  <style scoped>
  .handle-box {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-bottom: 20px;
  }
  .el-input--small {
      display: initial;
  }
  .handle-input {
      width: auto;
      display: inline-block;
  }
  .mr10 {
      margin-right: 10px;
  }
  .red {
    color: #f56c6c;
  }
    .green{
      color:#67C23A;
    }
  </style>